{% extends "data_opform.html" %}
{% load i18n %}
{% block headajaxjs %}
    <!-- markItUp! skin -->
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/markitup/skins/markitup/style.css">
	<!--  markItUp! toolbar skin -->
	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/markitup/sets/default/style.css">
	<!-- markItUp! -->
	<script type="text/javascript" src="{{ MEDIA_URL }}/markitup/jquery.markitup.js"></script>
	<!-- markItUp! toolbar settings -->
	<script type="text/javascript" src="{{ MEDIA_URL }}/markitup/sets/default/set.js"></script>
{% endblock %}
{% block keydown %}
{% endblock %}
{% block form %}
{% autoescape off %}
    <tr>
        {{form.event|field_as_td_h}}
    </tr>
    <tr id="id-status">
        {{form.status|field_as_td_h}}
    </tr>
    <tr>
        {{form.receiver|field_as_td_h}}
    </tr>
    <tr>
        <th><label for=""><i class="icon-info">{% trans 'Receiver' %}:</i></label></th>
        <td><div id="receiver-info"></div></td>
    </tr>
    <tr id="id-head">
        <th><label for="">{% trans 'Head' %}:</label></th>
        <td><div id="event-head"></div></td>
    </tr>
    <tr id="id-cell">
        <th><label for="">{% trans 'Value' %}:</label></th>
        <td><div id="event-cell"></div></td>
    </tr>
    <tr>
        {{form.subject|field_as_td_h}}
    </tr>
    <tr id="id-maximum" class="displayN">
        {{form.maximum|field_as_td_h}}
    </tr>
    <tr>
        {{form.email_tmp|field_as_td_h}}
    </tr>
{% endautoescape %}
{% endblock %}
{% block addjs %}
    $('#id_email_tmp').markItUp(mySettings);
    function data_refresh(){
        $.ajax({
            url: '/att/get_template/',
            data: {
                event: $("#id_event").val(),
                event_status: $("#id_status").val(),
                receiver: $("#id_receiver").val(),
            },
            type: 'POST',
            dataType: 'json',
            success: function(callback){
                var heads = callback.head;
                var cells = callback.cell;
                var subject = callback.subject;
                var maximum = callback.maximum;
                var template = callback.template;
                var parameter = callback.parameter;
                $("#receiver-info").html(parameter.join(','));
                $("#event-head").html(heads.join(','));
                $("#event-cell").html(cells.join(','));
                $("#id_subject").val(subject);
                $("#id_maximum").html(maximum);
                $("#id_email_tmp").html(template);
            }
        });
    }
    data_refresh()
    $("#id_event").change(function(){
        var val = $(this).val()
        if(val == 7){
            $("#id-maximum").removeClass('displayN');
            $("#id-head").addClass('displayN');
            $("#id-cell").addClass('displayN');
            $("#id-status").addClass('displayN');
            $("#id_receiver").find('option').each(function(){
                if($(this).val() == 2 || $(this).val() == 3){
                    $(this).attr('disabled', true);
                }
            });
        }else{
            $("#id-maximum").addClass('displayN');
            $("#id-head").removeClass('displayN');
            $("#id-cell").removeClass('displayN');
            $("#id-status").removeClass('displayN');
            $("#id_receiver").find('option').each(function(){
                if($(this).val() == 2 || $(this).val() == 3){
                    $(this).attr('disabled', false);
                }
            });
        }
        data_refresh();
    });
    $("#id_status").change(data_refresh);
    $("#id_receiver").change(data_refresh);
{% endblock%}